<template>
	<kb-layout title="会员特权">
	
		<view class="bg-white ">
		
		 
		 <view class="u-padding-left-30 u-padding-right-30">
		 	<view class="u-margin-top-30">
		 		<up-subsection :list="['领券中心','权益中心' ]" font-size="16px"
		 		 @change="i=>{navIndex=i; clearResult();fetchData()}"
		 		:current="navIndex"></up-subsection>
		 	</view>
		 </view>
		 
		 
		 <view class="u-margin-top-30 u-flex u-flex-center align-center bg-info">
		 	<up-alert :center="true" type="info" description="开启优惠券到账/过期提醒,及时查收消息"></up-alert>
		 	<u-tag type="info" :plain="true" size="mini"  text="立即订阅"></u-tag> 
		 </view>
		
		  
			<view class="u-padding-30 " >
			 <view class="u-margin-bottom-30" v-for="(item,index) in cardList" :key="index">
			 		<couponItemVue :coupon="item"></couponItemVue>	
			 </view>	
			
			  
			<!-- 推荐商品end -->
			</view>
			
			<up-empty v-if="isempty" mode="shop" text="暂无数据" icon="/static/empty/nodata.png"> </up-empty>
			  
		 
		</view>
		<!-- <kb-footer :color="ee.bgColor.weight"></kb-footer>	 -->
	</kb-layout>
</template>

<script>
	import { couponList ,agentCoupon} from '../../common/api';
	import suggestGoodItem from "../mall/componets/good-grid-item.vue"; 
	import couponItemVue from './componet/coupon-item.vue';
	export default {
		components:{
			suggestGoodItem ,
			 couponItemVue
		},
		data() {
			return {
				keyword:"",
				cardList:[],
				navIndex:0,
				page:1,
				pagesize:10,  
				total:0,
				shotips: undefined,
				nomore:true,
			}
		},
		computed:{
			isempty(){
				return  this.total==0;
			} 
		},
		onLoad() {
			this.fetchData();
		},
		methods: {
			onKeyword(){
				this.clearResult()
				this.fetchData()
			},
			clearResult(){
				this.cardList = [];
				this.page=1;
				this.total = 0;
			},
			fetchData( ){
			  
				const params = {  page: this.page ,type: this.navIndex ,keyword:this.keyword , limit: this.pagesize};
				couponList(params).then( (ret) => {
						 console.log(ret) 
						if(ret.data.length>0){								 
							this.page = this.page +1;							
							this.total = ret.total;					
							this.cardList = this.cardList.concat(ret.data);
						}  
					 
					}
				)  
			}
		},
		onReachBottom() {
			if(this.total  && this.total < this.page * this.pagesize) 
				this.nomore = true;
			else
			   this.total >1 &&  this.fetchData();
			
			this.shotips = false;	
			return true;
			 
		},
	}
</script>

<style lang="scss" scoped>
	page{
	  background-color: #fff;
	}
.bg-white{
	background-color: #fff;
	min-height: calc(100vh - 200px);
}
.good-grid{
	width: 46.9%;
	min-height: 200px;
	background-color: #EFEFF4;
	border-radius: 5px;
	margin-bottom: 15px;
}
</style>
